<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta charset="UTF-8">
    <title>优购优品网</title>
    <!-- <link rel="stylesheet" href="../css/themes/css/core.css">
    <link rel="stylesheet" href="../css/themes/css/icon.css">
    <link rel="stylesheet" href="../css/themes/css/home.css"> -->
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>

    <style>
        .l .t span {
            margin-left: 25px;
        }



        .l {
            padding: 10px 10px 20px 10px;
        }

        .l .l-r {
            position: relative;
            overflow: hidden;
        }

        .l .l-r .header {
            float: left;
            width: 50px;
            height: 40px;
            padding-right: 10px;
        }

        .l .l-r .header>div {
            border-radius: 4px;
            overflow: hidden;
        }

        .l .l-r .header img {
            width: 100%;
            height: 100%;
        }

        .l .l-r .text {
            float: left;
            min-width: 88px;
            max-width: calc(100% - 50px);
            position: relative;
        }

        .l .l-r .text .arrow {
            position: absolute;
            left: -5px;
            top: 10px;
            width: 10px;
            height: 10px;
        }

        .l .l-r .text .arrow img {
            width: 100%;
            height: 100%;
        }

        .l .l-r .text .chat-bg {
            font-size: 15px;
            letter-spacing: 1px;
        }

        .l .l-r .text .chat-bg .value {
            background: #ffffff;
            min-height: 40px;
            padding: 10px;
            line-height: 20px;
            border-radius: 4px;
            overflow: hidden;
        }

        .l .l-r .text .chat-bg:active {
            background: #cccccc;

        }

        .l .l-r .text .chat-bg .voice {
            font-size: 14px;
            letter-spacing: 0;
        }

        .l .l-r .text .chat-bg .voice img {
            width: 16px;
        }

        .l .l-r .text .chat-bg .voice * {
            vertical-align: middle;
        }

        .l .l-r .header>div {
            border-radius: 4px;
            overflow: hidden;
        }

        .image {
            overflow: hidden;
            margin: 5px -3px;
        }

        .image>div {
            float: left;
            padding: 3px;
        }

        .image image {
            width: 100%;
            height: 100%;
        }

        .w-1>div {
            width: 65%;
        }

        .w-2>div {
            width: 50%;
        }

        .w-3>div {
            width: 33.33%;
        }

        .content {
            background: #fbfbfb !important;
        }

        .van-rate {
            vertical-align: middle;
        }

        .sj {
            padding: 8px;
            font-size: 12px;
            background: #dedede;
            border-radius: 6px;
            line-height: 20px;
            padding-top: 8px;
            word-break: normal;
        }
        .tag{
            overflow: hidden;
            padding: 15px;
        }
        .tag>div{
            float: left;
            padding: 0 10px;
            height: 30px;
            line-height: 30px;
            border-radius: 30px;
            color: #000;
            font-size: 13px;
            background: #ebedf0;
            margin-right: 10px;
        }
        .tag .on{
            line-height: 28px;
            border:1px solid #cd1b21;
            color: #cd1b21;
            background: rgba(205,27,33,0.13);
        }
    </style>


</head>

<body>
    <div id="app" v-cloak>
        <div class="init-full">
            <van-nav-bar class="head" title="商品评价" left-arrow @click-left="onClickLeft"></van-nav-bar>
            <div class="body-no-bottom">
                <div class="content">
                    <div class="tag">
                        <div :class="tagIndex == 0?'on':''" @click="tagIndex = 0">全部</div>
                        <div :class="tagIndex == 1?'on':''" @click="tagIndex = 1">好评</div>
                        <div :class="tagIndex == 2?'on':''" @click="tagIndex = 2">中评</div>
                        <div :class="tagIndex == 3?'on':''" @click="tagIndex = 3">差评</div>
                        <div :class="tagIndex == 4?'on':''" @click="tagIndex = 4">晒图</div>
                    </div>
                    <div>
                        <ul>
                            <li v-for="(row,index) in evaluatedData" v-if="getTagData(row)">
                                <div class="l">
                                    <div class="l-r">
                                        <div class="header">
                                            <div><img :src="row.Picture?(shoppingMallServerIP + row.Picture):'../image/header.png'" /></div>
                                        </div>
                                        <div class="text" style="width:100%">
                                            <div class="chat-bg">
                                                <div class="user-name">
                                                    <div style="font-size: 16px;font-weight: 700;">
                                                        <span style="vertical-align: middle;">{{row.UserName}}</span>
                                                        <van-rate v-model="row.Score" :size="14" color="#ee0a24"
                                                            void-icon="star" void-color="#eee"></van-rate>
                                                    </div>
                                                    <div style="font-size: 12px;padding: 5px 0;color:#9e9e9e">
                                                        {{row.ReviewDate.split('.')[0].replace(/T/g,' ')}}</div>
                                                </div>
                                                <div style="font-size: 14px;">{{row.ReviewText || '此用户没有填写评价'}}</div>
                                                <div class="image" :class="getImageWidth(row)">
                                                    <div v-if="row.ImageUrl1"><img
                                                            :src="shoppingMallServerIP + row.ImageUrl1" /></div>
                                                    <div v-if="row.ImageUrl2"><img
                                                            :src="shoppingMallServerIP + row.ImageUrl2" /></div>
                                                    <div v-if="row.ImageUrl3"><img
                                                            :src="shoppingMallServerIP + row.ImageUrl3" /></div>
                                                    <div v-if="row.ImageUrl4"><img
                                                            :src="shoppingMallServerIP + row.ImageUrl4" /></div>
                                                    <div v-if="row.ImageUrl5"><img
                                                            :src="shoppingMallServerIP + row.ImageUrl5" /></div>
                                                </div>
                                                <div class="sj" v-if="row.ReplyText">
                                                    <div>
                                                        商家评论：{{row.ReplyText}}
                                                    </div>
                                                    <div style="color: #7d7d7d;text-align: right;">{{row.ReplyDate.split('.')[0].replace(/T/g,' ')}}</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>

                    </div>
                </div>
                <van-loading v-if="showLoading" />
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var vm;
    apiready = function () {
        //$('.init-full').show();

        var userInfo = FLD.getUserInfo();
        var ProductId = api.pageParam.ProductId;

        vm = new Vue({
            el: '#app',
            data: {
                showLoading: false,
                ifConfirm: false,
                tagIndex: 0,
                serverIP: 'http://' + FLD.serverIP,
                shoppingMallServerIP: 'http://' + FLD.shoppingMallServerIP,
                allEvaluatedData:[],
                evaluatedData: []
            },
            created: function () {
                var that = this;
                that.getList();

                
            },
            methods: {
                getList() {
                    var that = this;
                    FLD.ajax('sp_getroductReviews', { productId: ProductId }, function (res) {
                        that.allEvaluatedData = JSON.parse(JSON.stringify(res.ds));
                        that.evaluatedData = res.ds;
                    })
                },
                getTagData(row){
                    var that = this;
                    if(that.tagIndex == 0){
                        return true;
                    }else if(that.tagIndex == 1){
                        return row.Score == 5
                    }else if(that.tagIndex == 2){
                        return row.Score > 2 && row.Score < 5
                    }else if(that.tagIndex == 3){
                        return row.Score < 3
                    }else if(that.tagIndex == 4){
                        return row.ImageUrl1
                    }
                },
                getImageWidth(row) {
                    var x = 0;
                    if (row.ImageUrl1) {
                        x++
                    }
                    if (row.ImageUrl2) {
                        x++
                    }
                    if (row.ImageUrl3) {
                        x++
                    }
                    if (row.ImageUrl4) {
                        x++
                    }
                    if (row.ImageUrl5) {
                        x++
                    }
                    if (x == 1) {
                        return 'w-1';
                    } else if (x == 2) {
                        return 'w-2';
                    } else {
                        return 'w-3';
                    }
                },
                onClickLeft() {
                    api.closeWin();
                }
            }
        })
    };
</script>

</html>